<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title th:text="#{app.title}"> Title </title>
    <link th:href="@{/static/css/bootstrap.css}" rel="stylesheet"/>
    <link th:href="@{/static/css/app.css}" rel="stylesheet"/>
</head>

<body>

    <div class="form-container">

    <h1>New User Registration Form</h1>

    <form method="POST" th:action="@{/newUser}" th:object="${user}" class="form-horizontal">

        <div class="row">
            <div class="form-group col-md-12">
                <label class="col-md-3 control-lable" for="firstName">First Name</label>
                <div class="col-md-7">
                    <input type="text" th:field="*{firstName}" id="firstName" class="form-control input-sm"/>
                    <div th:if="${#fields.hasErrors('firstName')}" class="has-error">
                        <errors path="firstName" class="help-inline" th:text="#{error.user.firstName}" >First Name Error </errors>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="form-group col-md-12">
                <label class="col-md-3 control-lable" for="lastName">Last Name</label>
                <div class="col-md-7">
                    <input type="text" th:field="*{lastName}" id="lastName" class="form-control input-sm"/>
                    <div th:if="${#fields.hasErrors('lastName')}" class="has-error">
                        <errors path="lastName" class="help-inline"  th:text="#{error.user.lastName}" >Last Name Error </errors>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="form-group col-md-12">
                <label class="col-md-3 control-lable" for="ssoId">SSO ID</label>
                <div class="col-md-7">
                    <input type="text" th:field="*{ssoId}" id="ssoId" class="form-control input-sm"/>
                    <div th:if="${#fields.hasErrors('ssoId')}" class="has-error">
                        <errors path="ssoId" class="help-inline" th:text="#{error.user.ssoId}" >SSO ID Error</errors>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="form-group col-md-12">
                <label class="col-md-3 control-lable" for="password">Password</label>
                <div class="col-md-7">
                    <input type="password" th:field="*{password}" id="password" class="form-control input-sm"/>
                    <div th:if="${#fields.hasErrors('password')}" class="has-error">
                        <errors path="password" class="help-inline" th:text="#{error.user.password}" >Password Error</errors>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="form-group col-md-12">
                <label class="col-md-3 control-lable" for="email">Email</label>
                <div class="col-md-7">
                    <input type="text" th:field="*{email}" id="email" class="form-control input-sm"/>
                    <div th:if="${#fields.hasErrors('email')}" class="has-error">
                        <errors path="email" class="help-inline" th:text="#{error.user.email}" >Email Error</errors>
                    </div>
                </div>
            </div>
        </div>


        <div class="row">
            <div class="form-group col-md-12">
                <label class="col-md-3 control-lable">Roles</label>
                <div class="col-md-7">
                    <select th:field="*{userProfiles}"  multiple="true" itemValue="id" itemLabel="type" class="form-control input-sm">
                        <option th:each="role : ${roles}" th:value ="${role.id}" th:text="${role.type}">${role}</option>
                    </select>
                    <div th:if="${#fields.hasErrors('userProfiles')}" class="has-error">
                        <errors path="userProfiles" class="help-inline" th:text="#{error.user.userProfiles}" >UserProfiles Error</errors>
                    </div>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="form-actions floatRight">
                <input type="submit" value="Register" class="btn btn-primary btn-sm" /> or <a th:href="@{/admin}">Cancel</a>
            </div>
        </div>
    </form>
    </div>
</body>
</html>